<template>
  <div class="app-container">
    <el-row :gutter="20">
      <el-col :span="12" class="m-b-20">
        <el-card shadow="hover" class="w-100">
          <div slot="header" class="clearfix">
            <span>CPU</span>
          </div>
          <el-row :gutter="20">
            <el-col :span="12">属性</el-col>
            <el-col :span="12">值</el-col>
            <el-divider />
            <el-col :span="12">核心数</el-col>
            <el-col :span="12">{{ server.cpu.cpuNum }}</el-col>
            <el-col :span="12">用户使用率</el-col>
            <el-col :span="12">{{ server.cpu.used }}%</el-col>
            <el-col :span="12">系统使用率</el-col>
            <el-col :span="12">{{ server.cpu.sys }}%</el-col>
            <el-col :span="12">当前空闲率</el-col>
            <el-col :span="12">{{ server.cpu.free }}%</el-col>
          </el-row>
        </el-card>
      </el-col>
      <el-col :span="12" class="m-b-20">
        <el-card shadow="hover" class="w-100">
          <div slot="header" class="clearfix">
            <span>内存</span>
          </div>
          <el-row :gutter="20">
            <el-col :span="8">属性</el-col>
            <el-col :span="8">内存</el-col>
            <el-col :span="8">JVM</el-col>
            <el-divider />
            <el-col :span="8">总内存</el-col>
            <el-col :span="8">{{ server.mem.total }}GB</el-col>
            <el-col :span="8">{{ server.jvm.total }}MB</el-col>
            <el-col :span="8">已用内存</el-col>
            <el-col :span="8">{{ server.mem.used }}GB</el-col>
            <el-col :span="8">{{ server.jvm.used }}MB</el-col>
            <el-col :span="8">剩余内存</el-col>
            <el-col :span="8">{{ server.mem.free }}GB</el-col>
            <el-col :span="8">{{ server.jvm.free }}MB</el-col>
            <el-col :span="8">使用率</el-col>
            <el-col :span="8" :style="{'color':server.mem.usage>=80 ? 'red':'green'}">{{ server.mem.usage }}%</el-col>
            <el-col :span="8" :style="{'color':server.jvm.usage>=80 ? 'red':'green'}">{{ server.jvm.usage }}%</el-col>
          </el-row>
        </el-card>
      </el-col>
    </el-row>

    <el-row :gutter="20">
      <el-col :span="24" class="m-b-20">
        <el-card shadow="hover" class="w-100">
          <div slot="header" class="clearfix">
            <span>服务器信息</span>
          </div>
          <el-row :gutter="20">
            <el-col :span="6">服务器名称</el-col>
            <el-col :span="6">{{ server.sys.computerName }}</el-col>
            <el-col :span="6">操作系统</el-col>
            <el-col :span="6">{{ server.sys.osName }}</el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="6">服务器IP</el-col>
            <el-col :span="6">{{ server.sys.computerIp }}</el-col>
            <el-col :span="6">系统架构</el-col>
            <el-col :span="6">{{ server.sys.osArch }}</el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="6">服务器时间</el-col>
            <el-col :span="6">{{ server.sys.osTime }}</el-col>
          </el-row>
        </el-card>
      </el-col>
    </el-row>

    <el-row :gutter="20">
      <el-col :span="24" class="m-b-20">
        <el-card shadow="hover" class="w-100">
          <div slot="header" class="clearfix">
            <span>Java虚拟机信息</span>
          </div>
          <el-row :gutter="20">
            <el-col :span="6">Java名称</el-col>
            <el-col :span="6">{{ server.jvm.name }}</el-col>
            <el-col :span="6">Java版本</el-col>
            <el-col :span="6">{{ server.jvm.version }}</el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="6">启动时间</el-col>
            <el-col :span="6">{{ server.jvm.startTime }}</el-col>
            <el-col :span="6">运行时长</el-col>
            <el-col :span="6">{{ server.jvm.runTime }}</el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="3">安装路径</el-col>
            <el-col :span="9">{{ server.jvm.home }}</el-col>
            <el-col :span="3">项目路径</el-col>
            <el-col :span="9">{{ server.sys.userDir }}</el-col>
          </el-row>
        </el-card>
      </el-col>
    </el-row>

  </div>
</template>

<script>
import { serverInfo } from '@/api/system/log'

export default {
  data() {
    return {
      server: {
        cpu: {
          cpuNum: '',
          used: '',
          sys: '',
          free: ''
        },
        mem: {
          total: '',
          used: '',
          free: '',
          usage: 0
        },
        jvm: {
          total: '',
          used: '',
          free: '',
          usage: 0,
          name: '',
          version: '',
          startTime: '',
          runTime: '',
          home: ''
        },
        sys: {
          computerName: '',
          osName: '',
          computerIp: '',
          osArch: '',
          osTime: '',
          userDir: ''
        }
      }
    }
  },
  mounted() {
    this.init()
  },
  methods: {
    init() {
      serverInfo().then(response => {
        this.server = this.$api.objectUpdate(this.server, response.param)
      }).catch(() => {})
    }
  }
}
</script>

<style scoped>
.el-col {
  margin-bottom: 15px;
}
</style>
